<template>
  <div class="city-container no-background-container">
    <el-card>
      <template #header>行政区划（分类）</template>
      <CitySelect v-model="cityCode" />
    </el-card>
    <el-card>
      <template #header>行政区划（默认）</template>
      <el-cascader
        v-model="area"
        clearable
        filterable
        :options="areaOptions"
        :props="{ label: 'name', value: 'code' }"
      />
    </el-card>
  </div>
</template>

<script setup>
  import cityJSON from "./components/city.json";
  import CitySelect from "/@/components/CitySelect";

  const area = ref([]);
  const areaOptions = ref([]);
  const cityCode = ref(110000);

  const fetchData = async () => {
    areaOptions.value = cityJSON;
  };

  onBeforeMount(() => {
    fetchData();
  });
</script>
